<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: charles
 * @LastEditTime: 2021-07-14 15:18:36
-->
<template>
  <div id="Bottom3" style="height: 95%"></div>
</template>
<script>
import { Chart, registerShape } from "@antv/g2";
export default {
  data() {
    return {};
  },
  methods: {
    initChart() {
      // 1.导入数据
      registerShape("point", "pointer", {
        draw(cfg, group) {
          const point = cfg.points[0];
          const center = this.parsePoint({ x: 0, y: 0 });
          const target = this.parsePoint({ x: point.x, y: 0.9 });
          const dir_vec = { x: center.x - target.x, y: center.y - target.y };
          // normalize
          const length = Math.sqrt(
            dir_vec.x * dir_vec.x + dir_vec.y * dir_vec.y
          );
          dir_vec.x *= 1 / length;
          dir_vec.y *= 1 / length;
          // rotate dir_vector by -90 and scale
          const angle1 = -Math.PI / 2;
          const x_1 =
            Math.cos(angle1) * dir_vec.x - Math.sin(angle1) * dir_vec.y;
          const y_1 =
            Math.sin(angle1) * dir_vec.x + Math.cos(angle1) * dir_vec.y;
          // rotate dir_vector by 90 and scale
          const angle2 = Math.PI / 2;
          const x_2 =
            Math.cos(angle2) * dir_vec.x - Math.sin(angle2) * dir_vec.y;
          const y_2 =
            Math.sin(angle2) * dir_vec.x + Math.cos(angle2) * dir_vec.y;
          // polygon vertex
          const path = [
            ["M", target.x + x_1 * 1, target.y + y_1 * 1],
            ["L", center.x + x_1 * 3, center.y + y_1 * 3],
            ["L", center.x + x_2 * 3, center.y + y_2 * 3],
            ["L", target.x + x_2 * 1, target.y + y_2 * 1],
            ["Z"],
          ];
          const tick = group.addShape("path", {
            attrs: {
              path,
              fill: cfg.color,
            },
          });
          return tick;
        },
      });
      const data = [
        { type: "tsp", value: 0.97 },
        { type: "pm10", value: 0.83 },
        { type: "pm2.5", value: 0.64 },
      ];

      // 2.创建图表示例，配置配置项
      const chart = new Chart({
        container: "Bottom3",
        autoFit: true,
        height: 500,
      });
      chart.data(data);
      chart.coordinate("polar", {
        startAngle: (-10 / 8) * Math.PI,
        endAngle: (2 / 8) * Math.PI,
        radius: 0.75,
      });
      chart.scale("value", {
        min: 0,
        max: 1,
        tickInterval: 1,
      });
      chart.axis(false);
      chart.facet("rect", {
        fields: ["type"],
        showTitle: false,
        eachView: function eachView(view, facet) {
          const data = facet.data[0];
          // 指针
          view
            .point()
            .position("value*1")
            .shape("pointer")
            .color("#667694")
            .animate({
              appear: {
                animation: "fade-in",
              },
            });
          // 仪表盘背景
          view.annotation().arc({
            top: false,
            start: [0, 1],
            end: [1, 1],
            style: {
              stroke: "#61d9ab",
              lineWidth: 10,
            },
          });
          // 仪表盘前景
          view.annotation().arc({
            start: [0, 1],
            end: [data.value, 1],
            style: {
              stroke: "#f4a8a3",
              lineWidth: 10,
            },
          });
          // 仪表盘信息
          const percent = parseInt(data.value * 100, 10);

          view.annotation().text({
            position: ["50%", "70%"],
            content: data.type,
            style: {
              fontSize: 14,
              fill: "#409eff",
              fontWeight: 300,
              textAlign: "center",
            },
            offsetX: 0,
          });
          view.annotation().text({
            position: ["50%", "75%"],
            content: `${percent}%`,
            style: {
              fontSize: 25,
              fill: "#85d0d2",
              fontWeight: 500,
              textAlign: "center",
            },
            offsetX: 0,
            offsetY: 25,
          });
        },
      });
      // 3.渲染页面
      chart.render();
    },
  },
  mounted() {
    this.initChart();
  },
};
</script>